<template>
    <el-dialog
            :visible.sync="message"
            title="修改个人信息">
        <span>
            <span class="userImg">
                <el-upload
                        name="userImg"
                        :on-success="handleAvatarSuccess"
                        :show-file-list="false"
                        :headers="uploadHeaders"
                        action="http://www.zydz.icu:3000/api/zyblog/user/register/upload">
                <img :src="userImg" />
            </el-upload>
            </span>
            <span class="edit_title">点击头像上传照片</span>
            <el-form :model="editForm" label-width="80px" ref="editRef"
                     :rules="editRule">
                <el-form-item label="用户" prop="userName">
                    <el-input v-model="editForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                     <el-input v-model="editForm.passWord" type="password" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                     <el-input v-model="editForm.email"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer">
            <el-button @click="quit" size="small">取 消</el-button>
            <el-button @click="edit" type="primary" size="small">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {editUser,getUserD} from "../../../network/user";

    export default {
        name: "RegisterDia",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        data(){
            return {
                editForm:{},
                editRule:{
                    userName:[
                        {required:true,min:3,message:'请输入用户名,至少三个字符',trigger:'blur'}
                    ],
                    passWord:[
                        {required:true,min:6,message:'请输入密码,至少6位密码',trigger:'blur'}
                    ],
                    nextPassWord:[
                        {required:true,message:'确认密码',trigger:'blur'}
                    ],
                    email:[
                        {required:true,type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
                    ]
                },
                userImg:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                uploadHeaders:{
                    Authorization:sessionStorage.getItem('session')
                }
            }
        },
        methods: {
            quit() {
                this.$bus.$emit('editDia');
            },
            //提交修改信息
            edit(){
                this.$refs.editRef.validate(valid => {
                    if (valid !== true){
                        this.$message.warning('请输入必要信息！')
                    }else {
                        editUser(this.editForm).then(res => {
                            if (res.data.meta.status === 203){
                                this.$message.error(res.data.meta.msg);
                                this.editForm = this.$store.state.userInfo[0].result[0]
                            }else if (res.data.meta.status === 201){
                                this.$message.success(res.data.meta.msg);
                                this.$store.state.userInfo = [];
                                this.$router.replace('/login');
                                this.$bus.$emit('editDia');
                            }else {
                                this.$message.success(res.data.meta.msg);
                                this.$bus.$emit('editDia');
                            }
                        })
                    }
                })
            },
            //图片上传成功事件回调
            handleAvatarSuccess(res){
                this.userImg = 'http://www.zydz.icu:3000'+res.userImg;
                if (res.meta.status !== 200){
                    this.$message.warning(res.meta.msg);
                }else {
                    this.$message.success(res.meta.msg);
                    this.$store.state.userInfo[0].result[0].userImg = res.userImg;
                    this.$bus.$emit('getUrl',res.userImg);
                }
            },
            //获取用户信息
            getUserDM(){
                if ( this.$store.state.userInfo.length !== 0){
                    let id = this.$store.state.userInfo[0].result[0].Id;
                    getUserD(id).then(res => {
                        if (res.data.meta.status === 200){
                            this.editForm = res.data.data[0]
                        }else {
                            this.$message.warning('获取用户信息失败')
                        }
                    })
                }else {
                    this.editForm = {}
                }
            },
        },
        created() {
            this.getUserDM();
        }
    }
</script>

<style lang="less" scoped>
    .userImg{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        img{
            width:70px;
            height:70px;
            border-radius: 50%;

        }
    }
    .edit_title{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        animation: userImg linear 5s;
        animation-iteration-count: infinite;
    }
    @keyframes userImg {
        0%{
            color: skyblue;
        }
        25%{
            color: lightpink;
        }
        50%{
            color: hotpink;
        }
        75%{
            color: #b3d8ff;
        }
        100%{
            color: #c2e7b0;
        }
    }
    @media screen and (min-width: 1200px) {
        .el-dialog{
            width: 400px;
        }
    }

</style>